/*
* @Description:合约调用
* @Author: lil
* @Date: 2021/11/25
**/
<template>
  <div class="app-container contract-called">
    <el-row :gutter="10">
      <el-col :span="3">
        <div class="choose item">
          <p>选择调试的API</p>
          <div class="choose-bd">
            <el-button type="primary" :class="{uncheck:showQuery}" @click="chooseAPI('0')">链码调用</el-button>
            <el-button type="primary" :class="{uncheck:!showQuery}" @click="chooseAPI('1')">链码查询</el-button>
          </div>
        </div>
      </el-col>
      <!-- 链码查询 -->
      <template v-if="showQuery">
        <chain-code-query></chain-code-query>
      </template>
      <!-- 链码调用 -->
      <template v-if="!showQuery">
        <chain-code-call></chain-code-call>
      </template>
    </el-row>
  </div>
</template>
<script>
  import chainCodeQuery from './chainCodeQuery'
  import chainCodeCall from './chainCodeCall'
  export default {
    components: {
      chainCodeQuery,
      chainCodeCall
    },

    data() {
      return {
        showQuery: false,
      };
    },
    methods: {
      chooseAPI(type) {
        if (type === '0') {
          this.showQuery = false;
        } else {
          this.showQuery = true;
        }
      }
    }
  };

</script>
<style lang="scss" scoped>
  .contract-called {
    .item {
      border: 1px solid #e0e6f0;
      background-color: #fff;
      min-height: 750px;

      &>p {
        height: 40px;
        margin: 0;
        font-size: 14px;
        font-weight: bold;
        color: #353535;
        padding-left: 10px;
        line-height: 40px;
        border-bottom: 1px solid #e0e6f0;
      }
    }

    .choose {
      background-color: #e7e9ef;

      p {
        background-color: #6c8192;
        color: #fff;
      }

      .choose-bd {
        padding-top: 40px;

        .el-button {
          width: 143px;
          margin: 0 auto 35px;
          display: block;

          &.uncheck {
            background-color: #cedef7 !important;
            border-color: #cedef7 !important;
            color: #2e7dff;
            box-shadow: none !important;
          }
        }
      }
    }
  }

</style>
